<template>
	<div ref="chartRef" :style="{height, width}"></div>
</template>
<script lang="ts">
	import {defineComponent, onMounted, PropType, ref, Ref, reactive, watchEffect} from 'vue';
	import {useECharts} from '/@/hooks/web/useECharts';
	import {cloneDeep} from 'lodash-es';

	export default defineComponent({
		name: 'bar',
		props: {
			chartData: {
				type: Array,
				default: () => [],
			},
			option: {
				type: Object,
				default: () => ({}),
			},
			width: {
				type: String as PropType<string>,
				default: '100%',
			},
			height: {
				type: String as PropType<string>,
				default: '160px',
			},
			seriesColor: {
				type: String,
				default: '#1890ff',
			},
		},
		setup(props) {
			const chartRef = ref<HTMLDivElement | null>(null);
			const {setOptions, resize} = useECharts(chartRef as Ref<HTMLDivElement>);
			onMounted(() => {
				window.addEventListener('resize', function () {
					resize();
				});
			});

			const option = reactive({
				grid: {
					left: '5%',
					right: '5%',
					bottom: '3%',
					top: '20%',
					containLabel: true,
				},
				tooltip: {
					show: true,
				},
				xAxis: {
					// type: 'category',
					// data: nameArr,
					axisTick: {show: false},
					axisLine: {
						show: true,
						lineStyle: {
							color: '#7D8590',
						},
					},
					splitLine: {
						show: false,
						lineStyle: {
							color: '#7D8590',
						},
					},
					axisLabel: {
						show: true,
						textStyle: {
							color: '#7D8590',
							fontSize: 12,
						},
						//rotate:30
					},
				},
				yAxis: {
					type: 'value',
					name: '充电量（度）',
					splitLine: {
						show: true,
						lineStyle: {
							color: '#7D8590',
						},
					},
					axisTick: {show: false},
					axisLine: {
						show: true,
						lineStyle: {
							color: '#7D8590',
						},
					},
				},
				// title: {
				// 	text: props.chartData.name,
				//    subtext:props.chartData.unit,
				// 	left: 1 * 30 + 20 + '%',
				// 	top: '50%',
				// 	textAlign: 'center',

				// 	textStyle: {
				// 		fontWeight: 'normal',
				// 		fontSize: '12',
				// 		color: '#7D8590',
				// 		textAlign: 'center',
				//     width:'100px',
				//     background:'#fff'
				// 	},
				// },
				series: [
					{
						name: '充电量(度)',
						symbolSize: 11,
						data: [
							[8.3, 8.04],
							[8.07, 6.95],
							[13.0, 7.58],
							[9.05, 8.81],
							[11.0, 8.33],
							[14.0, 7.66],
							[13.4, 6.81],
							[10.0, 6.33],
							[14.0, 8.96],
							[12.5, 6.82],
							[9.15, 7.2],
							[11.5, 7.2],
							[3.03, 4.23],
							[12.2, 7.83],
							[2.02, 4.47],
							[1.05, 3.33],
							[4.05, 4.96],
							[6.03, 7.24],
							[12.0, 6.26],
							[12.0, 8.84],
							[7.08, 5.82],
							[5.02, 5.68],
						],
						itemStyle: {
							color: '#1890ff',
						},
						type: 'scatter',
					},
				],
			});

			watchEffect(() => {
				props.chartData && initCharts();
			});

			function initCharts() {
				if (props.option) {
					Object.assign(option);
				}
				let data = props.chartData.map((item) => {
					return [item.chargingTime, item.electric];
				});
				option.series[0].data = data;

				setOptions(option);
			}
			return {chartRef};
		},
	});
</script>
